<template>
    <tab
        :label="$gettext('Settings')"
        :item-header-class="tabClass"
    >
        <form-fieldset>
            <div class="row g-3">
                <form-group-field
                    id="edit_form_base_url"
                    class="col-md-6"
                    :field="r$.base_url"
                    input-type="url"
                    :label="$gettext('Site Base URL')"
                    :description="$gettext('The base URL where this service is located. Use either the external IP address or fully-qualified domain name (if one exists) pointing to this server.')"
                />

                <form-group-field
                    id="edit_form_instance_name"
                    class="col-md-6"
                    :field="r$.instance_name"
                    :label="$gettext('AzuraCast Instance Name')"
                    :description="$gettext('This name will appear as a sub-header next to the AzuraCast logo, to help identify this server.')"
                />

                <form-group-checkbox
                    id="edit_form_prefer_browser_url"
                    class="col-md-6"
                    :field="r$.prefer_browser_url"
                    :label="$gettext('Prefer Browser URL (If Available)')"
                >
                    <template #description>
                        {{
                            $gettext('If this setting is set to "Yes", the browser URL will be used instead of the base URL when it\'s available. Set to "No" to always use the base URL.')
                        }}
                    </template>
                </form-group-checkbox>

                <form-group-checkbox
                    id="edit_form_use_radio_proxy"
                    class="col-md-6"
                    :field="r$.use_radio_proxy"
                    :label="$gettext('Use Web Proxy for Radio')"
                    :description="$gettext('By default, radio stations broadcast on their own ports (i.e. 8000). If you\'re using a service like CloudFlare or accessing your radio station by SSL, you should enable this feature, which routes all radio through the web ports (80 and 443).')"
                />

                <form-group-field
                    id="edit_form_history_keep_days"
                    class="col-md-6"
                    :field="r$.history_keep_days"
                    :label="$gettext('Days of Playback History to Keep')"
                    :description="$gettext('Set longer to preserve more playback history and listener metadata for stations. Set shorter to save disk space.')"
                >
                    <template #default="{id, model}">
                        <radio-with-custom-number
                            :id="id"
                            v-model="model.$model"
                            :options="historyKeepDaysOptions"
                        />
                    </template>
                </form-group-field>

                <form-group-checkbox
                    id="edit_form_enable_static_nowplaying"
                    class="col-md-6"
                    :field="r$.enable_static_nowplaying"
                    :label="$gettext('Use High-Performance Now Playing Updates')"
                    :description="$gettext('Uses either Websockets, Server-Sent Events (SSE) or static JSON files to serve Now Playing data on public pages. This improves performance, especially with large listener volume. Disable this if you are encountering problems with the service or use multiple URLs to serve your public pages.')"
                />
            </div>
        </form-fieldset>
    </tab>
</template>

<script setup lang="ts">
import FormGroupField from "~/components/Form/FormGroupField.vue";
import FormFieldset from "~/components/Form/FormFieldset.vue";
import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
import {computed} from "vue";
import {useTranslate} from "~/vendor/gettext";
import Tab from "~/components/Common/Tab.vue";
import RadioWithCustomNumber from "~/components/Common/RadioWithCustomNumber.vue";
import {useAdminSettingsForm} from "~/components/Admin/Settings/form.ts";
import {useFormTabClass} from "~/functions/useFormTabClass.ts";
import {storeToRefs} from "pinia";

const {r$} = storeToRefs(useAdminSettingsForm());

const tabClass = useFormTabClass(computed(() => r$.value.$groups.generalTab));

const {$gettext} = useTranslate();

const historyKeepDaysOptions = computed(() => {
    return [
        {
            value: 14,
            text: $gettext('Last 14 Days')
        },
        {
            value: 30,
            text: $gettext('Last 30 Days')
        },
        {
            value: 60,
            text: $gettext('Last 60 Days')
        },
        {
            value: 365,
            text: $gettext('Last Year')
        },
        {
            value: 730,
            text: $gettext('Last 2 Years')
        },
        {
            value: 0,
            text: $gettext('Indefinitely')
        },
    ]
});
</script>
